<!-- 待审批管理 -->
<template>
    <div class="leave-box">
        <!-- 查询 -->
        <el-form :inline="true" ref="leaveRuleFormRef" :model="leaveRuleForm" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="审批状态" prop="applyState">
                <el-select v-model="leaveRuleForm.applyState" placeholder="请选择审批状态">
                    <el-option :label="item.label" :value="item.value" v-for="item in options" :key="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="SubmitForm(leaveRuleFormRef)">查询</el-button>
                <el-button @click="resetForm(leaveRuleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格数据 -->
        <div class="table-box">
            <el-table :data="tableData" style="width: 100%">
                <!-- 表格标题 -->
                <el-table-column :label="item.label" :prop="item.property" v-for="(item, index) in columns" :key="index"
                    :formatter="item.formatter" :width="item.width" />
                <el-table-column align="center" label="操作" width="180px">
                    <template #default="scope">
                        <el-button size="small" @click="handleView(scope.row)">审批</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="flex justify-center items-center mt-5">
                <el-pagination v-model:currentPage="pager.currentPage" v-model:page-size="pager.pageSize"
                    :page-sizes="[1, 3, 5, 10]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="pager.total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
            <!-- 对话框- -->
            <el-dialog v-model="approveDialogVisible" title="审批休假" width="50%" draggable>
                <el-form class="demo-ruleForm" ref="approveRuleFormRef" :model="approveRuleForm" label-width="120px"
                    status-icon>
                    <el-form-item label="休假类型：">
                        <span>{{ detail.applyType }}</span>
                    </el-form-item>
                    <el-form-item label="休假时间：">
                        <span>{{ detail.time }}</span>
                    </el-form-item>
                    <el-form-item label="休假时长：">
                        <span>{{ detail.leaveTime }}</span>
                    </el-form-item>
                    <el-form-item label="休假原因：">
                        <span>{{ detail.reasons }}</span>
                    </el-form-item>
                    <el-form-item label="审批状态：">
                        <span>{{ detail.applyState }}</span>
                    </el-form-item>
                    <el-form-item label="申请人：">
                        <span>{{ detail.applyUser.userName }}</span>
                    </el-form-item>
                    <el-form-item label="审核：">
                        <span>{{ detail.curAuditUserName }}</span>
                    </el-form-item>
                    <el-form-item label="备注：" prop="remark">
                        <el-input type="textarea" :rows="3" v-model="approveRuleForm.remark" placeholder="请输入备注" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="handleApprove('refuse', approveRuleFormRef)">驳回</el-button>
                        <el-button type="primary" @click="handleApprove('pass', approveRuleFormRef)">审核通过</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
// import { validateMobile } from '../../utils/vaildate'
import api from '../../api'

onMounted(() => {
    getleavelistapi()
})
// 获取到审批列表的数据
const getleavelistapi = (obj?: any) => {
    api.getLeaveListApi({ ...obj, ...pager }).then((res: any) => {
        console.log(res);
        tableData.value = res.list
    })
}

//时间格式转换函数
const formatDate = (dateString: any) => {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}


// 头部查询
const formSize = ref('default')//用于控制该表单内组件的尺寸
const leaveRuleFormRef = ref<FormInstance>()//获取ref节点
//查询的数据
const leaveRuleForm = reactive({
    applyState: 0,
    // type: 'approve'//请求审批列表的类型()
})
//查询的数据格式
const options = [
    {
        value: 0,
        label: "全部",
    },
    {
        value: 1,
        label: "待审批",
    },
    {
        value: 2,
        label: "审批中",
    },
    {
        value: 3,
        label: "审批通过",
    },
    {
        value: 4,
        label: "审批拒绝",
    },
    {
        value: 5,
        label: "作废",
    },
];
//查询按钮
const SubmitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // 调用全部审批列表接口
            getleavelistapi(leaveRuleForm)
        } else {
            console.log('error submit!', fields)
        }
    })
}
//重置按钮
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}



// 创建审批对话框
const approveDialogVisible = ref(false)//对话框开关
const approveRuleFormRef = ref<FormInstance>()
//审核备注
const approveRuleForm = reactive({
    remark: "",
})
//对话框内容
let detail = ref<any>({})


//对话框按钮(审核通过或驳回)
const handleApprove = async (val: string, _formEl: FormInstance | undefined) => {
    let params = {
        _id: detail.value._id,
        action: val,
        remark: approveRuleForm.remark
    }
    api.getLeaveApproveApi(params).then((res: any) => {
        if (res.code == 200) {
            // 调用全部审批列表接口
            getleavelistapi()
        }
    })
    approveDialogVisible.value = false;
}
// //对话框关闭回调
// const dialogClose = () => {
//     //重置表单数据
//     resetForm(detail.value)
// }



// 主体表格
const tableData: any = ref()// 表单数据
// 表格标题
const columns = [
    {
        label: '单号',
        property: 'orderNo'
    },
    {
        label: '休假时间',
        property: 'allTime',
        width: '210px',
        formatter(_row: string, _column: string, cellValue: string) {
            let time1 = formatDate(cellValue[0])
            let time2 = formatDate(cellValue[1])
            return `${time1} 至 ${time2}`
        },
    },
    {
        label: '休假时长',
        property: 'leaveTime',
        formatter(_row: string, _column: string, cellValue: string) {
            return cellValue + '小时'
        },
    },
    {
        label: '休假类型',
        property: 'applyType',
        formatter(_row: string, _column: string, cellValue: string) {
            return {
                "1": "事假",
                "2": "病假",
                "3": "丧假",
                "4": "婚嫁",
                "5": "产假",
                "6": "陪产假",
                "7": "年假",
                "8": "调休",
            }[cellValue]
        },
    },
    {
        label: '休假原因',
        property: 'reasons',
        // width: '210px',
    },
    {
        label: '申请时间',
        property: 'createTime',
        formatter(_row: string, _column: string, cellValue: string) {
            let time1 = formatDate(cellValue)
            return `${time1}`
        },
    },
    {
        label: "审批人",
        property: "auditUsers",
        width: "200px",
    },
    {
        label: "当前审批人",
        property: "curAuditUserName"

    },
]
// 单个审批
const handleView = (row: User) => {
    let data: any = { ...row }//将row对象深拷贝给data
    detail.value = data
    data.applyType = data.applyType.toString()//number转为字符串
    const obj: any = {
        "1": "事假",
        "2": "病假",
        "3": "丧假",
        "4": "婚嫁",
        "5": "产假",
        "6": "陪产假",
        "7": "年假",
        "8": "调休"
    }
    const obj2: any = {
        "1": "待审批",
        "2": "审批中",
        "3": "审批通过",
        "4": "审批拒绝",
        "5": "作废"
    }
    detail.value.applyType = obj[data.applyType]//类型转换
    detail.value.applyStateName = obj2[data.applyState]//审批状态转换
    detail.value.time = formatDate(data.allTime[0]) + ' 到 ' + formatDate(data.allTime[1])
    console.log(detail);

    approveDialogVisible.value = true//开启对话框
}



//分页
const pager = reactive({
    currentPage: 1,//初始化为第1页
    pageSize: 10,//一页多少条数据
    total: 0,//总条数
})
const small = ref(false)//是否使用小型分页样式
const background = ref(false)//是否为分页按钮添加背景色
const disabled = ref(false)//是否禁用分页
//一页的条数改变时触发
const handleSizeChange = (val: number) => {
    pager.pageSize = val
    // 调用全部审批列表接口
    getleavelistapi()
}
//当前页变动时候触发
const handleCurrentChange = (val: number) => {
    pager.currentPage = val
    // 调用全部审批列表接口
    getleavelistapi()
}
</script>

<style scoped lang="less">
.el-select {
    width: 200px;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>